<%@ page import="com.houduan.model.Order" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>订单管理 - 网吧管理系统</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <aside class="lyear-layout-sidebar">
      <div id="logo" class="sidebar-header">
        <a href="index.jsp"><img src="images/logo-sidebar.png" alt="网吧管理系统" /></a>
      </div>
      <div class="lyear-layout-sidebar-scroll">
        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
            <li class="nav-item"><a href="StatisticsServlet"><i class="mdi mdi-home"></i> 后台首页</a></li>
            <li class="nav-item"><a href="ComputerServlet?action=list"><i class="mdi mdi-laptop"></i> 电脑管理</a></li>
            <li class="nav-item active"><a href="OrderServlet?action=list"><i class="mdi mdi-cart"></i> 订单管理</a></li>
            <li class="nav-item"><a href="SessionServlet?action=list"><i class="mdi mdi-timer"></i> 上机管理</a></li>
            <li class="nav-item"><a href="UserServlet?action=list"><i class="mdi mdi-account"></i> 用户管理</a></li>
          </ul>
        </nav>
      </div>
    </aside>

    <header class="lyear-layout-header">
      <nav class="navbar navbar-default">
        <div class="topbar">
          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title">网吧管理系统</span>
          </div>
          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="用户头像" />
                <span>管理员 <span class="caret"></span></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="change_password.jsp"><i class="mdi mdi-lock-outline"></i> 修改密码</a></li>
                <li><a href="logout.jsp"><i class="mdi mdi-logout-variant"></i> 退出登录</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main class="lyear-layout-content">
      <div class="container-fluid">
        <h2>订单管理</h2>

        <!-- 操作按钮 -->
        <div class="text-right mb-3">
          <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addOrderModal">新增订单</button>
          <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#searchOrderModal">查询订单</button>
          <button class="btn btn-secondary btn-sm" onclick="refreshPage()">刷新</button>
        </div>

        <!-- 订单表格 -->
        <table class="table table-striped">
          <thead>
          <tr>
            <th>订单编号</th>
            <th>用户</th>
            <th>金额</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <%
            // 从 request 中获取订单列表
            List<com.houduan.model.Order> orders = (List<Order>) request.getAttribute("orders");
            if (orders != null && !orders.isEmpty()) {
              for (com.houduan.model.Order order : orders) {
          %>
          <tr>
            <td><%= order.getOrderId() %></td>
            <td><%= order.getUser().getUsername() %></td>
            <td><%= order.getAmount() %></td>
            <td><%= order.getStatus() %></td>
            <td><%= order.getCreateTime() %></td>
            <td>
              <button class="btn btn-info btn-sm"
                      data-toggle="modal"
                      data-target="#editOrderModal"
                      onclick="populateEditForm('<%= order.getOrderId() %>', '<%= order.getAmount() %>', '<%= order.getStatus() %>')">编辑</button>
              <a href="OrderServlet?action=delete&orderId=<%= order.getOrderId() %>"
                 class="btn btn-danger btn-sm"
                 onclick="return confirm('确认删除此订单吗？')">删除</a>
            </td>
          </tr>
          <%
            }
          } else {
          %>
          <tr>
            <td colspan="6" class="text-center">暂无订单数据</td>
          </tr>
          <% } %>
          </tbody>
        </table>
      </div>
    </main>
  </div> <!-- lyear-layout-container -->
</div> <!-- lyear-layout-web -->

<!-- 新增订单模态框 -->
<div class="modal fade" id="addOrderModal" tabindex="-1" role="dialog" aria-labelledby="addOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addOrderModalLabel">新增订单</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="addOrderForm" method="post" action="OrderServlet?action=insert">
          <div class="form-group">
            <label for="userId">用户</label>
            <input type="text" class="form-control" id="userId" name="userId" placeholder="请输入用户ID" required>
          </div>
          <div class="form-group">
            <label for="amount">金额</label>
            <input type="number" class="form-control" id="amount" name="amount" placeholder="请输入金额" required>
          </div>
          <div class="form-group">
            <label for="status">状态</label>
            <select class="form-control" id="status" name="status" required>
              <option value="未支付">未支付</option>
              <option value="已支付">已支付</option>
              <option value="已取消">已取消</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary">保存</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 查询订单模态框 -->
<div class="modal fade" id="searchOrderModal" tabindex="-1" role="dialog" aria-labelledby="searchOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="searchOrderModalLabel">查询订单</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="searchOrderForm" method="get" action="OrderServlet">
          <div class="form-group">
            <label for="searchQuery">查询条件</label>
            <input type="text" class="form-control" id="searchQuery" name="query" placeholder="请输入用户名或订单编号" required>
          </div>
          <input type="hidden" name="action" value="search">
          <button type="submit" class="btn btn-primary">查询</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 编辑订单模态框 -->
<div class="modal fade" id="editOrderModal" tabindex="-1" role="dialog" aria-labelledby="editOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editOrderModalLabel">编辑订单</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="editOrderForm" method="post" action="OrderServlet?action=update">
          <input type="hidden" id="editOrderId" name="orderId">
          <div class="form-group">
            <label for="editAmount">金额</label>
            <input type="number" class="form-control" id="editAmount" name="amount" required>
          </div>
          <div class="form-group">
            <label for="editStatus">状态</label>
            <select class="form-control" id="editStatus" name="status" required>
              <option value="未支付">未支付</option>
              <option value="已支付">已支付</option>
              <option value="已取消">已取消</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary">保存</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.min.js"></script>
<script>
  // 刷新页面的 JavaScript 函数
  function refreshPage() {
    window.location.href = "OrderServlet?action=list";
  }

  // 填充编辑表单
  function populateEditForm(orderId, amount, status) {
    document.getElementById('editOrderId').value = orderId;
    document.getElementById('editAmount').value = amount;
    document.getElementById('editStatus').value = status;
  }
</script>
</body>
</html>
